<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../static/css/border.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/rainbow.scss"/>
		<style type="text/scss">
		    div.item {
		        div{
		            border: 20px solid;
		            border-image: linear-gradient(45deg, gold, deeppink) 1;
		            clip-path: inset(0px round 10px);
		            animation: huerotate 6s infinite linear;
		            /*
		            hue-rotate() (en-US) 函数在输入图像上应用色相旋转。
		                angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。
		                若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。
		    
		            svg 元素 失效！！
		            */
		            filter: hue-rotate(360deg);
		        }
		        @keyframes huerotate {
		            0% {
		                filter: hue-rotate(0deg);
		            }
		            100% {
		                filter: hue-rorate(360deg);
		            }
		        }
		    }
			#box{
				width: 100px;
				height: 100px;
				 font-family: Arial;
				    font-size: 18px;
				    line-height: 30px;
				    font-weight: bold;
				    color: white;
				    padding: 15px;
				    border: 10px dashed #FF5722;
				    background:
				    linear-gradient(to top, green, 10px, transparent 10px),
				    linear-gradient(to right, green, 10px, transparent 10px),
				    linear-gradient(to bottom, green, 10px, transparent 10px),
				    linear-gradient(to left, green, 10px, transparent 10px);
				    background-origin: border-box;
				
			}
		</style>
	</head>
	<body>
		<button class="draw">draw</button>
		     <button class="draw meet">draw meet</button>
		     <button class="center">center</button>
		     <button class="spin">spin</button>
		     <button class="spin circle">spin circle</button>
		     <button class="spin thick">spin thick</button>
		
		
		<div class="item" info="颜色渐变边框">
		  <div></div>
		</div>
		
		<button type="button" id="box"></button>

	</body>
</html>
